<template>
  <div v-if="questionTotal === 0"></div>
  <div v-else>
    <div class="testinfo">
      <div class="title3" v-if="showNumberTitle">
        <span class="tops">第 {{ currentQuestionPage + 1 }} 题 </span>
      </div>

      <div>
        <!-- <div
          style="float: left; text-align: left; line-height: 40px; width: 50%"
        >
          <h3>
            {{ currentQuestion.questionType | getQuestionTypeName }} ({{
              currentQuestion.mark
            }}分)
          </h3>
        </div> -->
        <!-- <div style="float: right; line-height: 40px; width: 50%">
          <el-button
          
            @click="openAnswerFlag = true"
            type="primary"
            style="position: relative; left: 348px"
            round
            >答题卡</el-button
          >
        </div> -->
      </div>
      <!-- <el-divider></el-divider> -->
       

      <div class="testbox">
          
        <!-- <label>{{ currentQuestionPage + 1 }}.</label> -->
        <!-- <div style="float: right" v-html="currentQuestion.content"></div> -->
      </div>
 <!-- <el-divider content-position="left" > -->
 <span style="font-size:20px"> {{ currentQuestionPage + 1 }}.<span  v-html="currentQuestion.content"></span></span>  
   <!-- </el-divider> -->
      <!-- <el-dialog title="答题卡" :visible.sync="openAnswerFlag" width="30%">
        <template v-for="(question, index) in questionAnswerDataList">
          <el-button
            :key="++index"
            size="medium"
            @click="selectQuestion(index)"
            circle
            :class="question.studentAnswer!=null&&question.studentAnswer!=''?  'isAnswerClass':''"
            >{{ index }}</el-button
          >
        </template>
      </el-dialog> -->

      <!-- 试题选项 -->
      <el-row class="test-opt" style="padding-left: 20px; margin-top: 15px">
        <!-- 单选题 -->
        <template v-if="currentQuestion.questionType === 1">
          <el-radio-group
            v-for="(item, index) in currentQuestion.optionList"
            :key="index"
            v-model="currentQuestion.studentAnswer"
            @change="studentAnswerRedio"
          >
            <el-radio :label="item.label"
              >{{ item.label }}. &nbsp;
              
              <label v-html="item.option_name"></label>
            </el-radio>
          </el-radio-group>
        </template>

        <!-- 多选题 -->
        <template v-if="currentQuestion.questionType === 2">
          <el-checkbox-group
            v-for="(item, index) in currentQuestion.optionList"
            :key="index"
            v-model="currentQuestion.studentAnswer"
            @change="studentAnswerRedio"
          >
            <el-checkbox :label="item.label"
              >{{ item.label }}. &nbsp;
              <label v-html="item.option_name"></label>
            </el-checkbox>
          </el-checkbox-group>
        </template>

        <!-- 判断题 -->
        <template v-if="currentQuestion.questionType === 6">
          <el-radio
            v-model="currentQuestion.studentAnswer"
            @change="studentAnswerRedio"
            label="1"
            >对</el-radio
          >
          <el-radio
            v-model="currentQuestion.studentAnswer"
            @change="studentAnswerRedio"
            label="0"
            >错</el-radio
          >
        </template>
        <div
          v-if="
            currentQuestion.questionType !== 1 &&
            currentQuestion.questionType !== 2 &&
            currentQuestion.questionType !== 6
          "
        >
          <div style="width: 300px; height: 40px">
            <h3 style="font-size: 20px; color: black; ">
              你的答案
            </h3>
          </div>

          <br />

          <el-row>
            <el-col :span="1"></el-col>
            <el-col :span="22">
              <quill-editor
                ref="myTextEditor"
                v-model="content"
                 :options="editorOption"
                :config="editorOption"
                @blur="onEditorBlur($event)"
                @focus="onEditorFocus($event)"
                @ready="onEditorReady($event)"
                @change="onEditorChange($event)"
              >
              </quill-editor>
            </el-col>
            <el-col :span="1"></el-col>
          </el-row>
        </div>
      </el-row>
    </div>

    <div class="btnbox">
      <el-button
        type="primary" 
        v-if="currentQuestionPage !== 0"
        round
        @click="changeQuestionIndex(-1)"
      >
        <i class="el-icon-arrow-left"></i>
        上一题
      </el-button>

      <el-button
        v-if="questionTotal > 1 && currentQuestionPage !== questionTotal - 1"
        type="warning"
        @click="changeQuestionIndex(1)"
        round
        >下一题 <i class="el-icon-arrow-right"></i
      ></el-button>
      <el-button
        type="success"
        round
        @click="saveStudentAnswerQuill"
        v-if="
          currentQuestion.questionType !== 1 &&
          currentQuestion.questionType !== 2 &&
          currentQuestion.questionType !== 6
        "
      >
        保存答案
      </el-button>

      <el-button type="danger" class="btn" round @click="commitQuestion"
        >{{ commitButtonText }}
      </el-button>
    </div>
    <br />
  </div>
</template>

<script>
import { clearLoginInfo } from "@/api/common";
import { mapGetters } from 'vuex';
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import { quillEditor } from "vue-quill-editor";
import { getDictValueByType } from "../api/dict";
let thisPage = null;
export default {
  name: "question-info",
  components: {
    quillEditor,
  },
  props: {
    // 试题及试题答案列表
    questionInfoAnswerList: {
      type: Array,
      default() {
        return [];
      },
    },

    showNumberTitle: {
      type: Boolean,
      default: true,
    },

    timeOutFlag: {
      type: Boolean,
      default: false,
    },

    commitButtonText: {
      type: String,
      default: "提 交",
    },
    testPaperID: {
      type: Number,
    },
    index: {
      type: Number,
    },
  },

  watch: {
    questionInfoAnswerList(val) {
      console.log('questionInfoAnswerList', val)

      this.questionAnswerDataList = val;
      this.questionTotal = this.questionAnswerDataList.length;
      // this.currentQuestion = this.questionAnswerDataList[0];
      // if (this.questionAnswerDataList.length > 0) {
      // // this.currentQuestion = this.questionAnswerDataList[0];
      // this.questionAnswerDataList.forEach(element => {
      //   if (element.id === this.currentQuestion.questionInfoId) {

      //     this.currentQuestion.studentAnswer = element.studentAnswer;
      //     this.content = this.currentQuestion.studentAnswer;
      //   }
      // });
      // }
      this.$emit('getQuestionAnswerDataList', this.questionAnswerDataList)

      this.parserQuestion();
    },
    index(val) {
      this.selectQuestion(val)
    },
    timeOutFlag(val) {
      // if (val) {
      //   this.commitQuestion(); // 时间结束自动提交试卷
      // }
    },
    // content:{
    //   handler(){
    //         this.saveStudentAnswerQuill()
    //   },

    //   deep:true
    // }
  },
  computed: {
    ...mapGetters({
      userInfo: 'user/getUserInfo'
    })
  },
  data() {
    return {
      id: "",
      openAnswerFlag: false,
      sumSource: 0,
      questionTypeList: [],
      fileUrl: this.$store.state.common.fileHost,
      optionEditorArray: [], // 存储答案富文本对象
      optionEditorInstance: null,
      content: "", //富文本编辑器的内容
      option: "",
      analysisEditor: null,
      // editorOption: "",
      info: "",
      studentQuestionList: [],
      currentQuestion: {}, // 当前试题
      currentStudentAnwers: {},//学生答案
      currentQuestionPage: 0,
      questionAnswerDataList: [], // 试题答案列表
      questionTotal: 0,
      mark: 0,
      answer: null,
      studentAnswer: "",
      editorOption: {
        modules: {
            syntax: {
                highlight: text => hljs.highlightAuto(text).value
            },
            toolbar: [
                ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
                ['blockquote', 'code-block'],

                [{'header': 1}, {'header': 2}],               // custom button values
                [{'list': 'ordered'}, {'list': 'bullet'}],
                [{'script': 'sub'}, {'script': 'super'}],      // superscript/subscript
                [{'indent': '-1'}, {'indent': '+1'}],          // outdent/indent
                [{'direction': 'rtl'}],                         // text direction

                [{'size': ['small', false, 'large', 'huge']}],  // custom dropdown
                [{'header': [1, 2, 3, 4, 5, 6, false]}],

                [{'color': []}, {'background': []}],          // dropdown with defaults from theme
                [{'font': []}],
                [{'align': []}],
            ]
        },
        placeholder: '编辑内容...'
    }
    };
  },

  beforeCreate() {
    thisPage = this;
  },
  created() {
    this.getStudentQuestionList()
  },
  mounted() {
    getDictValueByType("question_type").then((response) => {
      this.questionTypeList = response.data.data;
      // console.log('questionTypeList',this.questionTypeList)
      this.getStudentQuestionList()
    });

    //    this.questionInfoAnswerList.forEach((item)=>{
    //    if(item.questionType==6){
    //      this.questionAnswerDataList.push(item)
    //    }

    //  })
    // this.questionInfoAnswerList.forEach((item) => {
    //   if (item.questionType == 7) {
    //     this.questionAnswerDataList.push(item)
    //   }

    // })
    // this.questionAnswerDataList = this.questionInfoAnswerList;
    this.content = ''
    if (this.questionAnswerDataList.length > 0) {
      // this.currentQuestion = this.questionAnswerDataList[0];
      this.studentQuestionList.forEach(element => {
        if (element.questionInfoId === this.currentQuestion.questionInfoId) {
          this.currentQuestion.studentAnswer = element.studentAnswer;
          this.content = this.currentQuestion.studentAnswer;
        }
      });
      this.getStudentQuestionList()
    }

  },

  methods: {
    studentAnswerRedio(val) {
      let status = false
      this.axios
        .get(this.$httpApi.httpUrl(`/student/selectStuState`), { //判断账号是否禁用
          params: {
            id: this.userInfo.id
          }
        })
        .then((response) => {

          status = response.data.data.disabledFlag
          if (status === true) {
            this.$message({
              type: "error",
              message: '已被禁止考试，如有问题请举手提问',
            });
            this.logout()
            return
          }

          // console.log()
        });
      let studentAnswer = ''
      if (val instanceof Array) {//判断是否是数组
        val.forEach((item) => {
          studentAnswer += item + ",";
        })
      } else {
        studentAnswer = val
      }
      let stuA = {
        questionInfoId:
          this.questionInfoAnswerList[this.currentQuestionPage]
            .questionInfoId,
        questionMark: this.mark, // 试题得分
        studentAnswer: studentAnswer, //学员试题答案
      }
      console.log(stuA)
      this.addOrUpdateAnswer(stuA);
      //  this.getStudentQuestionList()
    },
    onEditorBlur(editor) {
      console.log("editor blur!", editor);
    },
    onEditorFocus(editor) {
      //鼠标选中输入触发
      console.log("editor focus!", editor);
    },
    onEditorReady(editor) {
      //加载时立即调用
      console.log("editor ready!", editor);

    },
    onEditorChange({ editor, html, text }) {
      console.log("editor change!", html);
      this.content = html;

      //  send(){
      //    alert(this.content)
      //  }
    },
    saveStudentAnswerQuill() {
      let status = false
      let content = this.content
      this.axios
        .get(this.$httpApi.httpUrl(`/student/selectStuState`), { //判断账号是否禁用
          params: {
            id: this.userInfo.id
          }
        })
        .then((response) => {

          status = response.data.data.disabledFlag
          if (status === true) {
            this.$message({
              type: "error",
              message: '已被禁止考试，如有问题请举手提问',
            });
            this.logout()
            return
          }

          // console.log()
        });

      let stuA = {
        questionInfoId:
          this.questionInfoAnswerList[this.currentQuestionPage]
            .questionInfoId,
        questionMark: this.mark, // 试题得分
        studentAnswer: content, //学员试题答案
      }
      //  console.log(stuA)
      this.addOrUpdateAnswer(stuA);
        this.content = content
      // this.getStudentQuestionList()
    

    },
    getStudentQuestionList() {
      this.studentQuestionList = []
      let that = this
      this.axios.get(this.$httpApi.httpUrl('/getStudentExamQuestionAnswerList/' + this.userInfo.id))
        .then(response => {
          let questionList = []
          // console.log('examQuestionItemResponseList', response.data.data.questionGroupItemResponseList)
          let examQuestionItemResponseList = response.data.data.questionGroupItemResponseList
          let questionIndex = 0
          examQuestionItemResponseList.forEach(item => {
            let examQuestionAnswerList = item.questionInfoAnswerList
            examQuestionAnswerList.forEach(question => {
              questionIndex++
              question.questionIndex = questionIndex
              question.questionInfoId = question.id
              if (question.options) {
                question.optionList = JSON.parse(question.options)
              }
              if (question.questionType !== 1 && question.questionType !== 6) {
                let studentAnswer = []
                if (question.questionType !== 2) {
                  question.studentAnswer.split(',').forEach(answer => {
                    if (answer) {
                      studentAnswer.push(this.fileHost + answer)
                    }
                  })
                  question.studentAnswerArray = studentAnswer
                } else {
                  question.studentAnswer.split(',').forEach(answer => {
                    if (answer) {
                      studentAnswer.push(answer)
                    }
                  })
                  question.studentAnswer = studentAnswer

                }
              }

              if (question.questionType !== 1 && question.questionType !== 2 && question.questionType !== 6) {
                question.errorQuestionFlag = 0 // 默认不加入学员错题本
              }
              questionList.push(question)
            })
          })


          // questionList.sort((a, b) => {
          //   return a.id - b.id
          // })
          this.studentQuestionList = questionList

          this.totalCount = questionList.length
          console.log('studentQuestionList', this.studentQuestionList)
          this.content = ''

          questionList.forEach(element => {
            // if (element.questionInfoId === this.currentQuestion.questionInfoId) {

            //   that.currentQuestion.studentAnswer = element.studentAnswer;
            //   that.content = that.currentQuestion.studentAnswer;
            // }
            this.questionAnswerDataList.forEach(item => {

              if (item.questionInfoId == element.questionInfoId) {
                item.studentAnswer = element.studentAnswer
                this.content = this.currentQuestion.studentAnswer.toString();
              }
            })
            // this.content
          });

          // if(this.currentQuestionPage!=0){
          //   this.currentQuestion = this.questionAnswerDataList[this.currentQuestionPage]
          // }
          // else if (this.totalCount > 0) {
          //   this.currentQuestion = this.questionAnswerDataList[0]
          //   console.log('questionAnswerDataList', this.currentQuestion)
          // }


        })
    },
    changeQuestionIndex(index) {
      let questionAnswerParam = [];
      let status = false
      this.axios
        .get(this.$httpApi.httpUrl(`/student/selectStuState`), { //判断账号是否禁用
          params: {
            id: this.userInfo.id
          }
        })
        .then((response) => {
          status = response.data.data.disabledFlag
          if (status === true) {
            this.$message({
              type: "error",
              message: '已被禁止考试，如有问题请举手提问',
            });
            this.logout()

          }
          return
          // console.log()
        });

      console.log("this.questionAnswerDataList", this.questionAnswerDataList);
      if (index === -1 && this.currentQuestionPage !== 0) {
        // 切换上一题

        this.currentQuestionPage -= 1;
        this.content = ''
        this.currentQuestion = this.questionAnswerDataList[this.currentQuestionPage];
        this.$emit('getCurrentQuestionPage',this.currentQuestionPage)
        // this.studentQuestionList.forEach(element => {
        // //  this.questionAnswerDataList.forEach(item=>{
        // //    if(item.questionInfoId==element.questionInfoId){
        // //      item.studentAnswer = element.studentAnswer
        // //    }
        // //  })
        //   if (element.questionInfoId == this.currentQuestion.questionInfoId) {
        //     this.currentQuestion.studentAnswer = element.studentAnswer;
        //     this.content = this.currentQuestion.studentAnswer;
        //   }
        // });
        this.getStudentQuestionList()
      }

      if (index === 1 && this.currentQuestionPage < this.questionTotal) {

        this.currentQuestionPage += 1;
        this.content = ''
        this.currentQuestion = this.questionAnswerDataList[this.currentQuestionPage];
         this.$emit('getCurrentQuestionPage',this.currentQuestionPage)
        // if(this.questionAnswerDataList)
        // this.studentQuestionList.forEach(element => {
        //   if (element.questionInfoId == this.currentQuestion.questionInfoId) {
        //     this.currentQuestion.studentAnswer = element.studentAnswer;
        //     this.content = this.currentQuestion.studentAnswer;
        //   }
        // });
        this.getStudentQuestionList()
        //  if(this.currentQuestion!=null){

        // }

      }
      this.parserQuestion();
      // console.log(questionAnswerParam)

    },

    //单题答案提交和修改
    addOrUpdateAnswer(item) {
      let params = {
        testPaperId: this.testPaperID,
        questionInfoId: item.questionInfoId,
        mark: item.questionMark,
        studentAnswer: item.studentAnswer,
      };
      console.log("item", item);
      this.axios
        .post(
          this.$httpApi.httpUrl(`/student/testPaperInfo/saveQuestionAnswer/`),
          params
        )
        .then((response) => {
          this.$message({
            type: "success",
            message: '保存成功',
          });
        });
    },

    parserQuestion() {
      this.currentQuestion =
        this.questionAnswerDataList[this.currentQuestionPage];
      if (this.currentQuestion.options) {
        this.currentQuestion.optionList = JSON.parse(
          this.currentQuestion.options
        );
      }
    },

    // 答题卡切换试题
    selectQuestion(index) {
      this.currentQuestionPage = index - 1;
       this.currentQuestion = this.questionAnswerDataList[this.currentQuestionPage];
        this.getStudentQuestionList()
      // this.currentQuestion = this.questionAnswerDataList[this.currentQuestionPage];
      // this.studentQuestionList.forEach(element => {
      //   if (element.questionInfoId == this.currentQuestion.questionInfoId) {
      //     this.currentQuestion.studentAnswer = element.studentAnswer;
      //     this.content = this.currentQuestion.studentAnswer;
      //   }
      // });

      this.parserQuestion();
      // this.openAnswerFlag = false;
    },

    openWritingBoard() {
      // location.href = this.$store.state.host + '/static/writingBoard/writingBoard.html'
      this.$emit("openWritingBoard");
      window.open(
        this.$store.state.common.host +
        ":8004/static/writingBoard/writingBoard.html"
      );
    },
    //退出登录
    logoutCommon(that) {
      that.axios
        .post(that.$httpApi.httpUrl("/student/logout"))
        .then(function (response) {
          if (response.data.code === 1) {
            that.$message({
              type: "success",
              message: response.data.message,
            });
            clearLoginInfo();
            setTimeout(function () {
              that.$router.push({ name: "login" });
            }, 1000);
          } else {
            that.$message({
              type: "error",
              message: response.data.message,
            });
          }
        });
    },

    // 退出验证提示
    logout() {
      let that = this;

      that.logoutCommon(that);

    },

    // 提交
    commitQuestion() {
      let ids = ''
      ids = this.userInfo.id
      // 关闭状态，禁止考试
      this.$confirm(
        "提交后将不能答题, 是否继续？",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          // eslint-disable-next-line no-undef
          this.axios
            .get(this.$httpApi.httpUrl(`/testStudent/closeState`), {
              params: {
                ids
              }
            })
            .then((response) => {
              this.logout()
            });

        })
        .catch(() => {

        });

      // let questionAnswerParam = [];
      // this.currentQuestionPage += 1;
      // if (this.currentQuestion.questionType === 2) {
      //   //复选题
      //   this.studentAnswer = "";
      //   this.questionInfoAnswerList[
      //     this.currentQuestionPage - 1
      //   ].studentAnswer.forEach((value) => {
      //     this.studentAnswer += value + ",";
      //   });

      //   questionAnswerParam.push({
      //     questionInfoId:
      //       this.questionInfoAnswerList[this.currentQuestionPage - 1]
      //         .questionInfoId,
      //     questionMark: this.mark, // 试题得分
      //     studentAnswer: this.studentAnswer, //学员试题答案
      //   });
      // } else if (this.currentQuestion.questionType === 3) {
      //   // 填空题
      //   questionAnswerParam.push({
      //     questionInfoId:
      //       this.questionInfoAnswerList[this.currentQuestionPage - 1]
      //         .questionInfoId,
      //     questionMark: this.mark, // 试题得分
      //     studentAnswer: this.content, //学员试题答案
      //   });
      // } else {
      //   questionAnswerParam.push({
      //     questionInfoId:
      //       this.questionInfoAnswerList[this.currentQuestionPage - 1]
      //         .questionInfoId,
      //     questionMark: this.mark, // 试题得分
      //     studentAnswer:
      //       this.questionInfoAnswerList[this.currentQuestionPage - 1]
      //         .studentAnswer, //学员试题答案
      //   });
      // }
      // this.$router.push({ name: "exam" });
      // let noAnswerCount = 0;

      // let questionAnswerParam = [];
      // this.questionAnswerDataList.forEach((item) => {
      //   let studentAnswerStr = "";
      //   if (item.studentAnswer instanceof Array) {
      //     if (item.studentAnswer.length === 0) {
      //       noAnswerCount++;
      //     } else {
      //       item.studentAnswer.forEach((value) => {
      //         studentAnswerStr += value + ",";
      //       });
      //       studentAnswerStr = studentAnswerStr.substr(
      //         0,
      //         studentAnswerStr.length - 1
      //       );
      //     }
      //   } else {
      //     if (!item.studentAnswer) {
      //       noAnswerCount++;
      //     } else {
      //       studentAnswerStr = item.studentAnswer;
      //     }
      //   }
      //   questionAnswerParam.push({
      //     questionInfoId: item.questionInfoId,
      //     answer: item.answer, // 试题答案
      //     questionType: item.questionType, // 试题类型
      //     questionMark: item.mark, // 试题得分
      //     studentAnswer: studentAnswerStr, //学员试题答案
      //   });
      // });

      // if (this.timeOutFlag) {
      //   this.$emit("afterCommit", questionAnswerParam);
      // } else {
      //   // 未答试题数量
      //   let message = "确定提交吗?";
      //   if (noAnswerCount > 0) {
      //     message = "您还有" + noAnswerCount + "题尚未做答, 确定提交吗?";
      //   }
      //   this.$confirm(message, "提示", {
      //     confirmButtonText: "确定",
      //     cancelButtonText: "取消",
      //     type: "warning",
      //   })
      //     .then(() => {
      //       this.$emit("afterCommit", questionAnswerParam);
      //     })
      //     .catch(() => {
      //       this.$message({
      //         type: "info",
      //         message: "已取消提交",
      //       });
      //     });
      // }
    },

    getTestPaperList() {
      this.axios
        .get(this.$httpApi.httpUrl("/student/testPaperInfo/list"), {
          params: {
            pageNumber: this.currentPage,
            pageSize: this.pageSize,
            subjectId: this.subjectId,
          },
        })
        .then((response) => {
          this.testPaperList = response.data.data.dataList;
          if (this.testPaperList.length === 0) {
            this.hasTestPaperInfo = false;
          } else {
            this.hasTestPaperInfo = true;
          }
          this.totalCount = response.data.data.total;
        });
    },

    // 保存富文本内容
    saveOptionValue() {
      let option = this.form.optionList[this.optionEditorIndex];
      option.option_name = this.optionEditorInstance.getContent();
      this.dialogFormVisible = false;
    },

    // optionEditorReady (instance) {
    //   this.optionEditorInstance = instance
    // },

    // 打开选项富文本并设置内容
    // openMathOptionsEditor (index) {
    //   console.log("哈哈哈哈" + index )
    //   this.dialogFormVisible = true
    //   this.optionEditorIndex = index
    //   this.optionEditorInstance.setContent('')
    //   let option = this.form.optionList[this.optionEditorIndex]
    //   this.optionEditorInstance.setContent(option.option_name)
    //  this.content.customConfig.onchange = html => {
    //    this.info_ = content; // 绑定当前逐渐地值
    //    this.$emit("content", this.info_); // 将内容同步到父组件中
    // };

    // },
  },

  filters: {
    getQuestionTypeName(questionType) {
      for (let i = 0; i < thisPage.questionTypeList.length; i++) {
        if (thisPage.questionTypeList[i].code === questionType) {
          return thisPage.questionTypeList[i].value;
        }
      }
      return "无";
    },
    /* parserAnswer (val) {
          if (val instanceof Array) {
            let value = ''
            for (let item in val) {
              value += val[item] + ","
            }
            return value.substr(0, value.length - 1)
          }
          return  val
        }*/
  },
};
</script>

<style lang="scss">
 span > p{
   display: inline-block;
}
div.el-divider.el-divider--horizontal > div > span > p{
   display: inline-block;
}
.ql-editor {//富文本编辑器输入框高度
    height: 200px!important;
}
.testbox p {
  display: inline-block;
}
  label > p{
  display:inline
}
// .isAnswerClass {
//   background: cornflowerblue;
// }
/*.el-upload--picture-card {*/
/*  width: 100px !important;*/
/*  height: 90px !important;*/
/*  line-height: 100px !important;*/
/*  vertical-align: top;*/
/*}*/
.tops {
  display: inline-block;
  text-align: center;
  width: 100px;
  height: 40px;
  line-height: 40px;
  border-radius: 40px;
  background-color: #fad303;
  box-shadow: 3px 2px 0 0 rgba(250, 213, 3, 0.445);
}

.el-pagination {
  margin-top: 15px;
  text-align: center;
}

.title3 .count {
  position: relative;
  overflow: overlay;
  display: inline-block;
  font-weight: bolder;
  left: 86px;
  color: red;
  font-size: 45px;
}
.title3 .mark {
  width: 205px;
  top: 85px;
  left: 57%;
  height: 64px;
  position: absolute;
}
.el-radio-button__inner,
.el-radio-group {
  padding-top: 20px !important;
  display: block !important;
}

.testinfo {
  padding-left: 30px;
  padding-top: 22px;
  min-height: 500px;
}
.title3 {
  width: 100%;
  height: 30px;
  text-align: center;
}

.subbtnbox {
  width: 100%;
  text-align: center;
  padding: 20px;
  .btn {
    width: 100px;
    background-color: red;
  }
}
.testbox {
  display: inline-block;
  margin-top: 30px;
}

.btnbox {
  display: flex;
  display: -webkit-flex;
  justify-content: space-around;
  padding-left: 100px;
  margin-top: 30px;
  padding-right: 100px;
}
.play {
  display: inline-block;
  height: 30px;
  line-height: 30px;
  padding-left: 10px;
  color: red;
  cursor: pointer;
  .cp {
    font-size: 20px;
    vertical-align: middle;
  }
}
</style>
